
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
	<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
	
    <style> 
	ul{
		list-style-type: none;
	}
	a{
		text-decoration: none;
	}

	.right{
		float: left;
	}
    #imgtag
    {
      position:relative;
	  float: left;
	  margin-left: 100px;
      min-width:300px;
      min-height:300px;
	  padding: 10px;
	  border:2px dashed #a78bfa;
      cursor: crosshair;
    }
    .tagview
    {
      /*border:solid 3px #000;*/
      width:50px;
      height:20px;
	  padding: 10px;
	  font-size: 18px;
	  color: #9afef7;
      position:absolute;
      display:none;
    }
	 .tagview a{
	 	font-weight: bold;
	 }
    #tagit
    {
      position:absolute;
      top:0;left:0;
      width:250px;
    }
	
	.box
    {
      /*border:solid 3px #000;*/
      width:32px;
      height:32px;
	  background-image: url(<?= $this->config->base_url(); ?>assets/images/add.png);
      float:left;
    }
     
    #tagit .name
    {
      float:left;
      background-color:#fff;
	  border: 1px dashed #000;
      width:160px;
      height:80px;
      padding:5px;
    }
    #tagit div.text
    {
      margin-bottom:5px;
    }
    #tagit input[type=text]
    {
      margin-bottom:5px;
    }
    #tagit #tagname
    {
      width:110px;
    }
    #taglist
    {
     
      width:190px;
      height:auto !important;
      float:left;
      margin-left:20px;
	  margin-top: 20px;
      color:#000;
	  border: 1px solid #61d63f;
     
    }
    #taglist ol { padding:0 20px;float:left;cursor:pointer}
    #taglist ol a { }
    #taglist ol a:hover { text-decoration:underline }
    .tagtitle
    {
      font-size:14px;
      text-align:center;
      width:100%;
      float:left; 
    }
    </style>
	<?php 
    $sql = "SELECT * FROM tag_picture";
    $qry = mysql_query($sql);
    $rs = mysql_fetch_array($qry);
  ?>
    <script> 
  $(document).ready(function(){
    var counter = 0;
    var mouseX = 0;
    var mouseY = 0;
	
	
	$('#taglist li').live('click',function(event){	
    	id = $(this).attr("rel");
		$('#view_' + id).show();
    });
	
	$('#taglist a').live('click',function(event){	
    	id = $(this).attr("rel");
     	$('#view_' + id).hide();
    });

	
	
    
    $("#imgtag img").click(function(e){ // make sure the image is click
      var imgtag = $(this).parent(); // get the div to append the tagging list
      mouseX = e.pageX - $(imgtag).offset().left; // x and y axis
      mouseY = e.pageY - $(imgtag).offset().top;
      $('#tagit').remove(); // remove any tagit div first
      $(imgtag).append('<div id="tagit"><div class="box"></div><div class="name"><div class="text">Type any name or tag</div><input type="text" name="txtname" id="tagname" /><select name="link_to" id="taglink"><option value="">Select Page to link</option><?php $sql = "SELECT * FROM tag_picture"; $query = mysql_query($sql); while($rows=mysql_fetch_array($query)){ ?><option value="<?php echo $rows['id']; ?>"><?php echo $rows['heading']; ?></option><?php }?></select><input type="button" name="btnsave" class="btn btn-info" value="Save" id="btnsave" />  <input type="button" name="btncancel" class="btn btn-danger" value="Cancel" id="btncancel" /></div></div>');
      $('#tagit').css({top:mouseY,left:mouseX});
      
      $('#tagname').focus();
    });
    
    $('#tagit #btnsave').live('click',function(){
      name = $('#tagname').val();
	  link_to = $('#taglink').val();
      
      $.ajax({
        type: "POST", 
        url: "savetag?pic_id=<?php echo $_GET['pic_id']; ?>", 
        data: "name=" + name + "&link_to=" + link_to + "&pic_x=" + mouseX + "&pic_y=" + mouseY + "&type=insert",
        cache: true, 
        success: function(data){
          viewtag();
          $('#tagit').fadeOut();
        }
      });
      
    });
    
     $('#tagit #btncancel').live('click',function(){
      $('#tagit').fadeOut();
      
    });
	


   	/*$('#taglist li').live('mouseover mouseout',function(event){
      id = $(this).attr("rel");
      if (event.type == "mouseover"){
        $('#view_' + id).show();
      }else{
        $('#view_' + id).hide();
      }
    });*/
	
	
	$('#taglist li a.remove').live('click',function(){
      id = $(this).parent().attr("rel");
      // get all tag on page load
      $.ajax({
        type: "POST", 
        url: "savetag?pic_id=<?php echo $_GET['pic_id']; ?>", 
        data: "tag_id=" + id + "&type=remove",
        success: function(data){
          viewtag();
        }
      });
    });
    
    viewtag(); // get all tag on page load
    
    function viewtag(pic_id)
    {
      // get the tag list with action remove
      $.ajax({
        type: "POST", 
        url: "savetag?pic_id=<?php echo $_GET['pic_id']; ?>", 
        data: "pic_id=" + pic_id,
        cache: true, 
        success: function(data){
          $('#taglist ol').html(data);
        }
      });
      
	  
	  
      // get the tag list for boxes
      $.ajax({
        type: "POST", 
        url: "taglist?pic_id=<?php echo $_GET['pic_id']; ?>", 
        data: "pic_id=" + pic_id,
        cache: true, 
        success: function(data){
          $('#tagbox').html(data);
        }
      });
    }
    
    
  });
</script> 
  </head> 
  <body>
  <div class="sampleTitle" style="color:#fc4376">
  <h1 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 400; color: #821212">Fedobe Wireframe Prototyping</h1>
<h3 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 100; color: #666">Turn your hand-drawn wireframes to interactive prototypes</h3>
  </div><br /><br />
  
 <script>
  
  		var showTags = function(){
      		id = $(this).attr("rel");
        	$('#view_' + id).show();
			$(".taglist").css("display","block");
    		});

      	var hideTags = function(){
            $(".taglist").css("display","none");
            };
			
		
			
  </script>

  
  <?php if ($_GET['pic_id']): ?>
  <div id="imgtag"> 
    <?php 
    $sql = "SELECT * FROM tag_picture WHERE id = " . stripslashes($_GET['pic_id']);
    $qry = mysql_query($sql);
    $rs = mysql_fetch_array($qry);
    ?>
	
	<img src="<?= $this->config->base_url(); ?>assets/images/tags/<?php echo $rs['image_name'] ?>" >
    <div id="tagbox">
    </div>
  </div> 
  
  
  
  <div class="right">
    
  <div style=" width:190px; margin-left:20px; border: 1px solid #61d63f;" >
  <h4 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 100; color: #666">SiteMap</h4>
  	 <?php 
	$userid=$this->session->userdata('user_id');	
    $sql = "SELECT * FROM tag_picture WHERE parent=0 and user_id=$userid ";
    $qry = mysql_query($sql);
    //$rs = mysql_fetch_array($qry);
  ?>




  <div class="imglist">
   <ul>
	<?php
	while($level1 = mysql_fetch_array($qry)){
		$id=$level1['id'];?>
		<li><b><a href="tag_picture?pic_id=<?php echo $level1['id'] ?>">&rsaquo; <?php echo ucfirst($level1['heading']); ?></a></b></li>
		
		<?php
		$userid1=$this->session->userdata('user_id');		
		$sql1 = "SELECT * FROM tag_picture WHERE parent=$id and user_id=$userid1";
    	$query1 = mysql_query($sql1);
		while($level2 = mysql_fetch_array($query1)){
		$id2=$level2['id'];?>
		<li><b><a href="tag_picture?pic_id=<?php echo $level2['id'] ?>">&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;&rsaquo; <?php echo ucfirst($level2['heading']); ?></a></b></li>
	
		<?php
		$userid2=$this->session->userdata('user_id');	
		$sql2 = "SELECT * FROM tag_picture WHERE parent=$id2 and user_id=$userid2";
    	$query2 = mysql_query($sql2);
		while($level3 = mysql_fetch_array($query2)){
		$id3=$level3['id'];?>
		<li><b><a href="tag_picture?pic_id=<?php echo $level3['id'] ?>">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;&rsaquo;&rsaquo; <?php echo ucfirst($level3['heading']); ?></a></b></li>
		
		<?php
		$userid3=$this->session->userdata('user_id');	
		$sql3 = "SELECT * FROM tag_picture WHERE parent=$id3 and user_id=$userid3";
    	$query3 = mysql_query($sql3);
		while($level4 = mysql_fetch_array($query3)){
		$id4=$level4['id'];
		?>
		<li><b><a href="tag_picture?pic_id=<?php echo $level4['id'] ?>">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;&rsaquo;&rsaquo;&rsaquo; <?php echo ucfirst($level4['heading']); ?></a></b></li>
		
		<?php
		$userid4=$this->session->userdata('user_id');	
		$sql4 = "SELECT * FROM tag_picture WHERE parent=$id4 and user_id=$userid4";
    	$query4 = mysql_query($sql4);
		while($level5 = mysql_fetch_array($query4)){
		?>
		<li><b><a href="tag_picture?pic_id=<?php echo $level5['id'] ?>">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;&rsaquo;&rsaquo;&rsaquo;&rsaquo; <?php echo ucfirst($level5['heading']); ?></a></b></li>
		
		<?php
		}
		}
		}
				
	}
		
	}
	?>
	</ul>
  </div>
	  
<br>
  </div>

  <div id="taglist"> 
  <span class="tagtitle"><h4 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 100; color: #666">Tag Links</h4>
  <h6 align="center" style="font-family: 'Roboto Slab', serif;font-weight: 100; color: #666">Click to Show</h6>
  </span> 
    <ol> 
    </ol> 
  </div> 
  </div>
  <?php else: ?>
  Must have a pic ID
  <?php endif; ?>









